<template>
<ph-actionsheet class="ph-dropdown-as" :visible="visible" v-if="actionsheet">
    <ph-list
        v-show="!disabled&&visible" 
        type="button"
        :title="title"
        :icon="icon"
        :nowrap="true"
        titleAlign="center"
        :align="align"
        :class="cns"
        >
            <slot></slot>
            <template v-if="multiple" v-slot:footbar>
                <ph-button :mini="true" @click="$emit('done')">确定</ph-button>
            </template>
        </ph-list>
</ph-actionsheet>
<ph-mask class="ph-dropdown-mask" v-else @click="$emit('hide')" :visible="visible">
    <transition :name="animation">
        <ph-list
        @click.stop
        v-show="!disabled&&visible" 
        type="button"
        :nowrap="true"
        :align="align"
        :style="style" 
        :class="cns"
        >
            <slot></slot>
            <template v-if="multiple" v-slot:footbar>
                <ph-button :mini="true" @click="$emit('done')">确定</ph-button>
            </template>
        </ph-list>
    </transition>
</ph-mask>
</template>
<script lang="ts" setup>
import PhMask from 'ph-mask'
import { defineProps, defineAsyncComponent, computed } from 'vue'
import { PhList } from 'ph-list'
const PhActionsheet = defineAsyncComponent(()=>import('ph-actionsheet'))
const PhButton = defineAsyncComponent(()=>import('../../base/button.vue'))
const props = defineProps({
    animation:{type:String,default:"ph-upbit"},
    visible:Boolean,
    disabled:Boolean,
    theme:String,
    style:Object,
    icon:String,
    actionsheet:Boolean,
    title:String,
    align:String,
    multiple:Boolean
})
const cns = computed(()=>{
    const cns = {
        'ph-drowdown-list':true
    } as Record<string,boolean>
    cns['ph-drowdown-list-'+props.theme] = true
    return cns
})
</script>
<style lang="scss">
@import '../../dropdown/dropdown.scss';
</style>
